<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>邀请函</title>
    <link rel="stylesheet" type="text/css" href="/assets/meeting_enroll/css/jquery.fullPage.css" />
    <link rel="stylesheet" type="text/css" href="/assets/meeting_enroll/css/index.css" />
</head>
<body>
    <audio id="audio" src="/assets/meeting_enroll/music/music.mp3" preload="auto" autoplay loop></audio>
    <a href="#" class="music-btn play"></a>
    <div id="fullpage">
        <div class="section section-1 section-bg-1 active">
            <div class="slogan transparent"><img src="/assets/meeting_enroll/images/slogan.png"/></div>
            <div class="line transparent"><img src="/assets/meeting_enroll/images/section-1-line.png"/></div>
            <div class="invitation transparent"><img src="/assets/meeting_enroll/images/section-1-invitation.png"/></div>
        </div>
        <div class="section section-2 section-bg-2">
            <div class="block block1 transparent"><img src="/assets/meeting_enroll/images/section-2-block1.png"/></div>
            <div class="block block2 transparent"><img src="/assets/meeting_enroll/images/section-2-block2.png"/></div>
            <div class="block block3 transparent"><img src="/assets/meeting_enroll/images/section-2-block3.png"/></div>
        </div>
        <div class="section section-3 section-bg-2">
            <div class="agenda transparent"><img src="/assets/meeting_enroll/images/section-3-agenda.png"/></div>
            <div class="agenda-box">
                <div class="line transparent"><img src="/assets/meeting_enroll/images/section-3-line.png"/></div>
                <div class="list-box">
                    <div class="list list-1 tb-mode">
                        <p class="circle tb-cell transparent"><span></span></p>
                        <p class="text tb-cell transparent">浙江省教育后勤协会学生公寓管理专业委员会2016年度工作报告、2016年度财务工作报告；</p>
                    </div>
                    <div class="list list-2 tb-mode">
                        <p class="circle tb-cell transparent"><span></span></p>
                        <p class="text tb-cell transparent">传达全国寓专会2017年度工作要点；</p>
                    </div>
                    <div class="list list-3 tb-mode">
                        <p class="circle tb-cell transparent"><span></span></p>
                        <p class="text tb-cell transparent">公寓管理先进集体工作经验交流、人员事迹介绍等；</p>
                    </div>
                    <div class="list list-4 tb-mode">
                        <p class="circle tb-cell transparent"><span></span></p>
                        <p class="text tb-cell transparent">浙江省教育后勤协会学生公寓管理专业委员会2016年度“先进班组”、“先进个人”表彰；</p>
                    </div>
                    <div class="list list-5 tb-mode">
                        <p class="circle tb-cell transparent"><span></span></p>
                        <p class="text tb-cell transparent">专家讲座。</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="section section-4 section-bg-1">
            <div class="slogan transparent"><img src="/assets/meeting_enroll/images/slogan.png"/></div>
            <a href="/Meeting/MeetingEnroll/meetingDetail/enroll_id/{BEESCRM:$enroll_id}" class="btn transparent"><img src="/assets/meeting_enroll/images/section-4-btn.png"/></a>
            <div class="apartment">
                <div class="top transparent">
                    <p class="text-16">主办单位</p>
                    <p>浙江省教育后勤协会学生公寓管理专业委员会</p>
                </div>
                <div class="clearfix">
                    <div class="bottom bottom-left transparent">
                        <p>协办单位</p>
                        <p>浙江教育后勤信息网</p>
                    </div>
                    <div class="bottom bottom-right transparent">
                        <p>承办单位</p>
                        <p>丽水学院后勤服务公司</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="arrow transparent"><img src="/assets/meeting_enroll/images/arrow.png"/></div>
    <div class="copyright transparent"><img src="/assets/meeting_enroll/images/copyright.png"/></div>
</body>

<script src="/assets/meeting_enroll/js/jquery-2.1.0.min.js"></script>
<script src="/assets/meeting_enroll/js/jquery.fullPage.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
    function autoPlayAudio() {
        wx.config({
            debug: false,
            appId: '',
            timestamp: 1,
            nonceStr: '',
            signature: '',
            jsApiList: []
        });
        wx.ready(function() {
            var globalAudio=document.getElementById("audio");
            globalAudio.play();
        });
    };
    autoPlayAudio();
</script>
<script type="text/javascript">
    wx.config({
        debug: false,
        appId: "{BEESCRM:$appid}",
        timestamp: "{BEESCRM:$timestamp}",
        nonceStr: "{BEESCRM:$noncestr}",
        signature: "{BEESCRM:$signature}",
        jsApiList: ['checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo'],
    });
    wx.ready(function () {
        var url = '{BEESCRM:$share_url}';
        var imgUrl = '{BEESCRM:$share_image}';
        var title = '{BEESCRM:$share_title}';
        var desc = '{BEESCRM:$share_desc}';
        //分享到朋友圈
        wx.onMenuShareTimeline({
            title: title, // 分享标题
            link: url, // 分享链接
            imgUrl: imgUrl, // 分享图标
            success: function () {
                //share();
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
                /* alert('已取消'); */
            }
        });
        //发送给好友
        wx.onMenuShareAppMessage({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: url, // 分享链接
            imgUrl: imgUrl, // 分享图标
            success: function () {
                // 用户确认分享后执行的回调函数
                //share();
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        });
    });
</script>
<script type="text/javascript">
    var width = $(window).width();
    $(window).load(function() {
        var audioEle = $("#audio")[0];
        audioEle.play();
        $('.music-btn').click(function(){
            $(this).toggleClass('play');
            if($(this).hasClass('play')){
                audioEle.play();
            }else{
                audioEle.pause();
            }
        });

        $('#fullpage').fullpage({
            'verticalCentered': false,
            'continuousVertical': true,
            'css3': true,
            afterLoad: function(link , index){
                switch (index){
                    case 1:
                        $('.section-1 .slogan').delay(300).animate({
                            paddingTop: width * 0.21,
                            opacity: 1
                        },500);
                        $('.section-1 .line').delay(500).animate({
                            marginTop: 0,
                            opacity: 1
                        },500);
                        $('.section-1 .invitation').delay(800).animate({
                            marginTop: 0,
                            opacity: 1
                        },500);
                        $('.arrow').delay(1200).animate({
                            opacity: 1
                        },500);
                        $('.copyright').delay(1400).animate({
                            opacity: 1
                        },300);
                        break;
                    case 2:
                        $('.section-2 .block1').delay(0).animate({
                            opacity: 1
                        },500);
                        $('.section-2 .block3').delay(300).animate({
                            opacity: 1
                        },500);
                        $('.section-2 .block2').delay(800).animate({
                            marginLeft: width * 0.09,
                            opacity: 1
                        },500);
                        $('.arrow').delay(1200).animate({
                            opacity: 1
                        },500);
                        $('.copyright').delay(1400).animate({
                            opacity: 1
                        },300);
                        break;
                    case 3:
                        $('.section-3 .agenda').delay(0).animate({
                            opacity: 1
                        },500);
                        $('.section-3 .line').delay(300).animate({
                            marginTop: 0,
                            opacity: 1
                        },500);
                        $('.section-3 .list-1 .circle').delay(800).animate({
                            opacity: 1
                        },400);
                        $('.section-3 .list-1 .text').delay(1200).animate({
                            paddingLeft: 10,
                            opacity: 1
                        },400);
                        $('.section-3 .list-2 .circle').delay(1500).animate({
                            opacity: 1
                        },400);
                        $('.section-3 .list-2 .text').delay(1900).animate({
                            paddingLeft: 10,
                            opacity: 1
                        },400);
                        $('.section-3 .list-3 .circle').delay(2200).animate({
                            opacity: 1
                        },400);
                        $('.section-3 .list-3 .text').delay(2600).animate({
                            paddingLeft: 10,
                            opacity: 1
                        },400);
                        $('.section-3 .list-4 .circle').delay(2900).animate({
                            opacity: 1
                        },400);
                        $('.section-3 .list-4 .text').delay(3300).animate({
                            paddingLeft: 10,
                            opacity: 1
                        },400);
                        $('.section-3 .list-5 .circle').delay(3600).animate({
                            opacity: 1
                        },400);
                        $('.section-3 .list-5 .text').delay(4000).animate({
                            paddingLeft: 10,
                            opacity: 1
                        },400);
                        $('.arrow').delay(4200).animate({
                            opacity: 1
                        },500);
                        $('.copyright').delay(4400).animate({
                            opacity: 1
                        },300);
                        break;
                    case 4:
                        $('.section-4 .slogan').delay(0).animate({
                            paddingTop: width * 0.21,
                            opacity: 1
                        },500);
                        $('.section-4 .btn').delay(300).animate({
                            opacity: 1
                        },1000);
                        $('.section-4 .top').delay(1000).animate({
                            marginTop: 0,
                            opacity: 1
                        },500);
                        $('.section-4 .bottom-left').delay(1500).animate({
                            marginLeft: 0,
                            opacity: 1
                        },500);
                        $('.section-4 .bottom-right').delay(1700).animate({
                            marginLeft: 0,
                            opacity: 1
                        },500);
                        $('.arrow').delay(2200).animate({
                            opacity: 1
                        },500);
                        $('.copyright').delay(2400).animate({
                            opacity: 1
                        },300);
                        break;
                }
            },
            onLeave: function(index , nextIndex , direction){
                switch (index){
                    case 1:
                        $('.section-1 .slogan').delay(0).animate({
                            paddingTop: width * 0.18,
                            opacity: 0
                        },500);
                        $('.section-1 .line').delay(0).animate({
                            marginTop: width * -0.04,
                            opacity: 0
                        },500);
                        $('.section-1 .invitation').delay(0).animate({
                            marginTop: width * -0.06,
                            opacity: 0
                        },500);
                        commonHide();
                        break;
                    case 2:
                        $('.section-2 .block1').delay(0).animate({
                            opacity: 0
                        },500);
                        $('.section-2 .block3').delay(300).animate({
                            opacity: 0
                        },500);
                        $('.section-2 .block2').delay(800).animate({
                            marginLeft: 'auto',
                            opacity: 0
                        },500);
                        commonHide();
                        break;
                    case 3:
                        $('.section-3 .agenda').delay(0).animate({
                            opacity: 0
                        },500);
                        $('.section-3 .line').delay(0).animate({
                            marginTop: width * -0.06,
                            opacity: 0
                        },500);
                        $('.section-3 .circle').delay(0).animate({
                            opacity: 0
                        },400);
                        $('.section-3 .text').delay(0).animate({
                            paddingLeft: 50,
                            opacity: 0
                        },400);
                        commonHide();
                        break;
                    case 4:
                        $('.section-4 .slogan').delay(0).animate({
                            paddingTop: width * 0.18,
                            opacity: 0
                        },500);
                        $('.section-4 .btn').delay(0).animate({
                            opacity: 0
                        },500);
                        $('.section-4 .top').delay(0).animate({
                            marginTop: width * -0.05,
                            opacity: 0
                        },500);
                        $('.section-4 .bottom-left').delay(0).animate({
                            marginLeft: width * -0.05,
                            opacity: 0
                        },500);
                        $('.section-4 .bottom-right').delay(0).animate({
                            marginLeft: width * -0.05,
                            opacity: 0
                        },500);
                        commonHide();
                        break;
                }
            },
            afterRender: function(){
                $('.section-1 .slogan').delay(300).animate({
                    paddingTop: width * 0.21,
                    opacity: 1
                },500);
                $('.section-1 .line').delay(500).animate({
                    marginTop: 0,
                    opacity: 1
                },500);
                $('.section-1 .invitation').delay(800).animate({
                    marginTop: 0,
                    opacity: 1
                },500);
                $('.arrow').delay(1200).animate({
                    opacity: 1
                },500);
                $('.copyright').delay(1400).animate({
                    opacity: 1
                },300);
            }
        });

        function commonHide() {
            $('.arrow').delay(0).animate({
                opacity: 0
            },500);
            $('.copyright').delay(0).animate({
                opacity: 0
            },300);
        }

        $('.schedule-list').click(function(){
            var idx = $(this).index();
            $('.pop-box').eq(idx).addClass('show').removeClass('hide');
        });

        $('.close').click(function(){
            $('.pop-box').addClass('hide').removeClass('show');
        })
    });
</script>

</html>
            